<script setup lang="ts">
import { computed, ref } from 'vue';

import { EyeOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';

import { errimage } from '#/base';
import { addAiImageStore } from '#/store';

const addAiImage = addAiImageStore();
const { nowSelectUseAiItem, allAiList } = storeToRefs(addAiImage);
const showMaxOrMin = ref(false);
const showData = computed(() => {
  return showMaxOrMin.value
    ? allAiList.value
    : nowSelectUseAiItem.value.aiImageList;
});
const visible = ref(false);
const urlUer = ref('err');
const setVisible = (value: any, url?): void => {
  urlUer.value = url;
  visible.value = value;
};
</script>

<template>
  <div class="h-full pl-4" style="flex: 1">
    <a-spin :spinning="nowSelectUseAiItem.lodingStatus" style="height: 100%">
      <div v-if="nowSelectUseAiItem.errText" class="text-red-500">
        {{ nowSelectUseAiItem.errText }}
      </div>
      <a-space class="my-4">
        <div>显示当前</div>
        <a-switch v-model:checked="showMaxOrMin" size="small" />
        <div>显示全部</div>
      </a-space>
      <div class="scrollbar-white overflow-y-auto" style="height: 505px">
        <a-space wrap>
          <div
            v-for="(item, index) in showData"
            :key="index"
            class="topmo relative overflow-hidden rounded-md border border-gray-200"
          >
            <img
              :src="item.url"
              alt=""
              class="rounded-md"
              height="100"
              width="100"
            />
            <div
              class="boto absolute left-0 flex h-4 w-full items-center justify-center gap-2 text-white"
            >
              <div
                class="flex-1 cursor-pointer text-center"
                @click="() => setVisible(true, item.url)"
              >
                <EyeOutlined />
              </div>
              <div
                class="flex-1 cursor-pointer text-center"
                @click="() => addAiImage.selectNowImage(item)"
              >
                <!-- <DeleteOutlined /> -->
                选择
              </div>
            </div>
          </div>
        </a-space>
      </div>
    </a-spin>
    <a-image
      v-if="visible"
      :fallback="errimage"
      :preview="{
        visible,
        onVisibleChange: setVisible,
      }"
      :src="urlUer"
      :style="{ display: 'none' }"
      :width="200"
    />
  </div>
</template>
<style lang="scss" scoped>
.scrollbar-white {
  &::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 4px;
  }
}

.topmo {
  .boto {
    bottom: -1rem;
    background: rgb(0 0 0 / 50%);
    transition: all 0.1s;
  }

  &:hover .boto {
    bottom: 0;
  }
}
</style>
